<template>
	<view class="">
		<form @submit="formSubmit">
			<view class="list">
				<view class="acea-row row-middle row-between">
					<view class="acea-row row-middle row-between item border-b w-48">
						<view class="label label-m">产权面积</view>
						<view class="acea-row row-middle row-right small-ipt">
							<input type="number" placeholder="示例:30" placeholder-class="placeholder-class"
								name="bvileAvea" v-model="dataform.bvileAvea" @change="beliveAreaChange">
							<text>m²</text>
						</view>
					</view>
					<view class="acea-row row-middle row-between item border-b w-48">
						<view class="label label-m">使用面积</view>
						<view class="acea-row row-middle row-right small-ipt">
							<input type="number" placeholder="示例:30" placeholder-class="placeholder-class"
								v-model="dataform.avea" @input="fillTilte" name="avea">
							<text>m²</text>
						</view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b " v-if="typeOn == 0 || typeOn == 1">
					<view class="label">月租金</view>
					<view class="acea-row row-middle row-right item-r">
						<view class="acea-row row-middle row-right small-ipt">
							<input type="number" placeholder="示例:3000" placeholder-class="placeholder-class"
								v-model="dataform.rent" name="rent">
							<text>元/月</text>
						</view>
						<view class="acea-row row-middle meet" :class="isFace==1?'':'no-meet'">
							<view class="meet-text">面议</view>
							<view class="switch" @click="isFace = isFace== 0?1:0">
								<image src="../static/images/switch_on.png" mode="" v-if="isFace == 1"></image>
								<image src="../static/images/switch_off.png" mode="" v-else></image>
							</view>
						</view>
					</view>
				</view>

				<view class="acea-row row-middle row-between item border-b " v-if="typeOn == 1">
					<view class="label">转让费</view>
					<view class="acea-row row-middle row-right item-r">
						<view class="acea-row row-middle row-right small-ipt">
							<input type="number" placeholder="示例:30" name="transferFee"
								placeholder-class="placeholder-class" v-model="dataform.transferFee">
							<text>万元</text>
						</view>
						<view class="acea-row row-middle meet" :class="transferStatus==0?'':'no-meet'">
							<view class="meet-text">面议</view>
							<view class="switch" @click="transferStatus = transferStatus==0?1:0">
								<image src="../static/images/switch_on.png" mode="" v-if="transferStatus == 1"></image>
								<image src="../static/images/switch_off.png" mode="" v-else></image>
							</view>
						</view>
					</view>
				</view>

				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						商铺地址
					</view>
					<view class="acea-row row-middle row-right item-r address">
						<input type="text" placeholder="请输入/选择商铺地址" placeholder-class="placeholder-class" name="addres"
							v-model="dataform.addres" @input="fillTilte">
						<image src="../static/images/location.png" mode="" @click="clickMap"></image>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						楼层
					</view>
					<view class="acea-row row-middle row-right item-r floor">
						<view class="">第</view>
						<input type="number" v-model="floor[0]">
						<view class="">层</view>
						<view class="margin-l">共</view>
						<input type="number" v-model="floor[1]">
						<view class="">层</view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						配套设施
					</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right" @click="openPopupShow = true">
						<input class="input-r" type="text" placeholder="请选择配套设施" placeholder-class="placeholder-class"
							v-model="supportingFacility" disabled />
					</view>
				</view>
				<dictionaryType ref="dictionaryType" :gids='15' @clickOk='clickOk' :key="15" :popupShow='openPopupShow'
					@popupClose="openPopupShow = false" />
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						店铺名称
					</view>
					<view class="acea-row row-middle row-right item-r">
						<input class="input-r" type="text" name="storeName" placeholder="请输入店铺名称"
							placeholder-class="placeholder-class" v-model="dataform.storeName" />
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						当前经营
					</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right"
						@click="openBusinessFormat('groupCurrent')">
						<input class="input-r" type="text" placeholder="请选择当前经营" placeholder-class="placeholder-class"
							v-model="groupCurrentName" disabled />
					</view>
				</view>
				<manage ref="groupCurrent" @confrim="currentConfrim" :multiple="false" :selectParent="true"></manage>
				<manage ref="workingGroup" @confrim="confrim" :selectParent="true"></manage>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						适合经营
					</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right"
						@click="openBusinessFormat('workingGroup')">
						<input class="input-r" type="text" placeholder="请选择适合经营" placeholder-class="placeholder-class"
							v-model="workingGroupName" disabled />
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						标题
					</view>
					<view class="acea-row row-middle row-right item-r">
						<input class="input-r" type="text" placeholder="请输入标题" placeholder-class="placeholder-class"
							v-model="dataform.title" name="title" />
					</view>
				</view>
				<!-- 联系人 -->
				<view class="acea-row row-middle row-between item  ">
					<view class="label label-m">
						联系人
					</view>
					<view class="add-icon" @click="addContact">
						<image src="../static/images/add_icon.png" mode=""></image>
					</view>
				</view>
				<view class="item border-b">
					<!-- <view class="contact-list">
						<view class="acea-row row-middle row-between contact-p" v-for="(item,index) in contactList"
							:key="index">
							<view class="acea-row row-middle row-between contact-r">
								<view class="add-icon" @click="deleteContact(index)">
									<image src="../static/images/sub_icon.png" mode=""></image>
								</view>
								<view class="name"
									@click="toPage('/pages/releases/addShopContact/addShopContact?info='+JSON.stringify(item) + '&infoIndex='+index)">
									{{item.username}} </view>
								<view class="gray-text" v-if='item.type == 1'>
									房东
								</view>
								<view class="gray-text" v-if='item.type == 2'>
									老板
								</view>
								<view class="gray-text" v-if='item.type == 3'>
									雇员
								</view>
								<view class="gray-text"
									@click="toPage('/pages/releases/addShopContact/addShopContact?info='+JSON.stringify(item) + '&infoIndex='+index)">
									{{item.phone}}
								</view>
							</view>
							<view class="acea-row row-middle check-box" v-if="item.open == 0">
								<image src="../static/images/checkbox_no.png" mode="" @click="openChange(item,1)">
								</image>
								<text>公开</text>
							</view>
							<view class="acea-row row-middle check-box" v-if="item.open == 1">
								<image src="../static/images/checkbox_on.png" mode="" @click="openChange(item,0)">
								</image>
								<text>公开</text>
							</view>
						</view>
					</view> -->
					<chooseContact :list="contactList" :dataform="dataform" @add="d=>contactList.push(d)"
						@del="toDel" />
				</view>
				<!-- 店铺优势 -->
				<view class="module">
					<!-- <view class="acea-row row-middle row-between">
						<view class="module-title">
							店铺优势
						</view>
						<view class="add-advantage red-sanjiao-r" @click="addAd">
							没找到合适的？选择自定义
						</view>
					</view>
					<view class="acea-row advantage-list">
						<view class="itemBox" v-for="(item,index) in advantages" :key="index">
							<icon type="cancel" color="#000" size="14" @click="closeAdvantages(item,index)"
								class="close" />
							<view class="item" :class="advantageIds.indexOf(index)!=-1?'item-on':''"
								@click="advantageChecked(item,index)">{{item}}</view>
						</view>
					</view> -->
					<chooseKeywords title="店铺优势" :advantages="advantages" type="0" :typeOn="typeOn"
						:storeAdvantage="storeAdvantage" :advantageIds="advantageIds"
						@storeAdvantage="val=>(storeAdvantage=val)" @advantageIds="val=>(advantageIds=val)"
						@advantages="val=>(advantages=val)" />
				</view>
				<!-- 描述 -->
				<view class="module">
					<view class="module-title">
						描述
					</view>
					<view class="textacea-box">
						<textarea placeholder="请输入描述" v-model="dataform.details" :maxlength="maxLength"
							name="details"></textarea>
						<view class="num-text">
							{{details.length}}/{{maxLength}}
						</view>
					</view>
				</view>
				<!-- 店铺照片/视频 -->
				<view class="module">
					<view class="acea-row row-middle row-between">
						<view class="module-title">
							店铺照片/视频
						</view>
						<view class="example-text" @click="getImage">
							图片示例
						</view>
					</view>
					<view class="example-text-l">
						请至少添加一张正面照，图片越多审核越快
					</view>
					<view class="acea-row pictrue-list">
						<view class="acea-row row-column row-center-wrapper pictrue"
							v-for="(item,index) in shopfrontPhotoList" :key="index" @click="deleteImage(index)">
							<image style="width: 218rpx;height: 172rpx;" :src="item" mode=""></image>
						</view>
						<view class="acea-row row-column row-center-wrapper pictrue" @click="selectPicture"
							v-if="!shopfrontPhotoList.length<10">
							<view class="upload-icon">
								<image src="../static/images/upload_icon.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 按钮 -->
			<view class="acea-row row-between row-middle btns">
				<button class="white-btn" @click="formSubmit(1)">继续完善</button>
				<button class="red-btn" @click="formSubmit(2)">完成</button>
			</view>
		</form>
		<ImageInstance ref="ImageInstance"></ImageInstance>
		<addKeyWord ref="addKeyWord" @addConfirm="addConfirm" />
	</view>
</template>

<script>
	import {
		ShopRentDetailApiNoDw,
		editInfo
	} from '@/api/subletOfShop.js'
	import {
		Debounce
	} from '@/utils/validate.js'
	import manage from "../components/manage.vue"
	import {
		informationAdd
	} from "@/api/subletOfShop.js"
	import {
		toPage,
		getCategory
	} from '@/filters/commFilter.js'
	import dictionaryType from '../components/dictionaryType.vue'
	import ImageInstance from '../components/ImageInstance.vue'
	import addKeyWord from '../components/addKeyWord/addKeyWord.vue'
	import tkiTree from "@/components/tki-tree/tki-tree.vue"
	import chooseKeywords from '../components/chooseKeywords.vue'
	import chooseContact from '../components/chooseContact.vue'
	export default {
		components: {
			manage,
			dictionaryType,
			ImageInstance,
			addKeyWord,
			tkiTree,
			chooseKeywords,
			chooseContact
		},
		props: ['categoryOn', 'typeOn', 'editId', 'patientinfo', 'st', 'storeCategory'],
		data() {
			return {
				shopfrontPhotoList: [],
				storeAdvantage: [],
				index: 0,
				array: [],
				supportingFacility: '',
				bvileAvea: '', //产权面积
				avea: '', //使用面积
				rent: null, //月租金
				transferFee: null, //转让费
				isFace: 0, //月租金是否面议
				transferStatus: 0, //转让费是否面议
				addres: '', //商铺地址
				storeName: '', //店铺名称
				floor: [1, 1], //楼层
				title: '', //标题
				businessStatvs: "",
				contactList: [],
				advantages: [], //店铺优势
				advantageIds: [],
				maxLength: 500,
				details: '', //补充
				workingGroupName: null, //当前经营Name
				groupCurrentName: null, //当前经营Name
				dataform: {
					details: '',
					businessCircle: '',
					businessName: '',
					avea: ''
				},
				openPopupShow: false,
				sts: 0
			}
		},
		watch: {
			categoryOn(val) {
				this.fillTilte();
				getApp().globalData.initContact()
			},
			'dataform.avea'() {
				this.fillTilte();
			},
			workingGroupName() {
				this.fillTilte();
			},
			typeOn(val) {
				this.fillTilte();
				getApp().globalData.initContact()
			},
			patientinfo: {
				handler: function(newV, oldV) {
					console.log("newV", newV)
					if (newV && Object.keys(newV).length > 0) {

						this.dataform = {
							...this.dataform,
							...newV
						}
						this.dataform.bvileAvea = this.dataform.floorage
						let d = this.dataform;
						getApp().globalData.fbDeal(d, this)

						this.supportingFacility = this.dataform.supportingName;
						this.storefrontTypeName = this.dataform.storefrontName
						this.floor = this.dataform.floor[0].split('-')
						console.log(this.dataform)
					}
				},
				deep: true,
			}
		},
		mounted() {
			console.log('this.ediTd', this.patientinfo)
			let that = this
			that.dataform.addres = that.$address;

			that.$set(that.dataform, 'latitude', this.$location.latitude)
			that.$set(that.dataform, 'longitude', this.$location.longitude)
			// uni.getStorage({
			// 	key:'USER_INFO',
			// 	success(res) {
			// 		that.contactList = [JSON.parse(res.data)];
			// 		console.log(that.contactList)
			// 	}
			// }
			this.$nextTick(() => {
				if (this.editId) {
					this.getDetail();
				} else {
					that.getBusiness(that.$location)
				}
			})
			this.$forceUpdate()

			getApp().globalData.initContact()
			uni.$on('means', function(data) {
				that.dataform = {
					...that.dataform,
					...data
				};
				that.formSubmit()
			})
			//先默认赋予当前
			this.dataform.city = this.$cityCode ? this.$cityCode[1] : '';
			this.dataform.province = this.$cityCode ? this.$cityCode[0] : '';
			this.dataform.district = this.$cityCode ? this.$cityCode[2] : '';
		},
		methods: {
			toPage,
			//添加店铺优势
			addAd() {
				this.$refs.addKeyWord.popupShow = true
			},
			addConfirm(e) {
				this.advantages = this.advantages.concat(e)
			},
			toDel(index, info, callback) {
				if (info) {
					this.contactList.splice(index, 1, info);
				} else {
					this.contactList.splice(index, 1);
				}
				callback && callback();
			},
			//查看图片示例
			getImage() {
				this.$refs.ImageInstance.show = true
			},
			beliveAreaChange(val) {
				if (!this.dataform.avea) {
					this.dataform.avea = val.detail.value;
					console.log("this.dataform.avea", this.dataform.avea)
				}

			},
			//配套设施
			clickOk(val) {
				this.dataform.supportingFacility = val.map(item => {
					return item.id
				}).join(',');
				this.supportingFacility = val.map(item => {
					return item.describe
				}).join(',');
				this.openPopupShow = false
			},
			//自动填充标题
			fillTilte() {
				if (this.editId && this.title) {
					return;
				}
				const type = this.typeOn == 0 ? '出租' : (this.typeOn == 1 ? '转让' : '');
				const category = getCategory(this.categoryOn).name;
				const {
					avea,
					addres,
					title,
					businessName
				} = this.dataform;
				this.dataform.title = avea ? type + ((businessName ? businessName : '') + avea + '㎡' + (this
					.workingGroupName ? this.workingGroupName : '') + category) : title;
				this.$forceUpdate();
			},
			//删除联系人
			deleteContact(index) {
				this.contactList.splice(index, 1)
			},
			//打开经营多选框
			openBusinessFormat(ref) {
				this.$refs[ref].filtrateShow = true
			},
			//确认选择适合经营后触发
			confrim(val) {
				this.dataform.workingGroup = val.selectedIds;
				this.workingGroupName = val.name;
			},
			//确认选择当前经营后触发
			currentConfrim(val) {
				this.dataform.groupCurrent = val.selectedIds;
				this.groupCurrentName = val.name;
			},
			selectPicture() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					count: 5,
					name: 'multipart',
					model: "user",
					pid: 0,
				}, function(res) {
					console.log("shangchaunres",res)
					that.shopfrontPhotoList.push(res.data.url)
				});
			},
			deleteImage(index) {
				this.shopfrontPhotoList.splice(index, 1)
			},
			clickMap(success) {
				let that = this
				uni.chooseLocation({
					success: (res) => {
						that.$set(that.dataform, 'addres', res.address)
						that.$set(that.dataform, 'latitude', res.latitude)
						that.$set(that.dataform, 'longitude', res.longitude)
						that.getBusiness({
							longitude: res.longitude,
							latitude: res.latitude,
						})
					},
				})
			},
			getBusiness(location) {
				let that = this;
				getApp().globalData.getBusinessList(location).then(res => {
					if (res.code == 200) {
						console.log('res',res)
						that.dataform.province = res.data.province;
						that.dataform.city = res.data.city;
						that.dataform.district = res.data.district;
						that.dataform.businessName = res.data.businessName;
						that.dataform.businessCircle = res.data.businessId;
						that.fillTilte()
					}
				});
			},
			openChange(row, index) {
				row.open = index
			},
			async formSubmit(status) {
				let that = this;

				if (this.sts !== 0) {
					uni.navigateBack();
					return;
				}
				if (!that.dataform.workingGroup) return that.$util.Tips({
					title: '请选择适合经营'
				});
				if (that.contactList.length <= 0) return that.$util.Tips({
					title: '请输入联系人'
				});
				if (!that.dataform.bvileAvea) return that.$util.Tips({
					title: '请输入产权面积'
				});
				if (!that.dataform.avea) return that.$util.Tips({
					title: '请输入使用面积'
				});
				if (!that.dataform.addres) return that.$util.Tips({
					title: '请输入/选择商铺地址'
				});

				this.dataform.floor = that.floor.join('-');
				this.dataform.storeAdvantage = that.storeAdvantage.join('/')
				this.dataform.isFace = that.isFace
				this.dataform.transferStatus = that.transferStatus
				if (!this.dataform.groupCurrent) {
					this.dataform.businessStatvs = 1
				}
				this.dataform.contacts = that.contactList.map(item => {
					const {
						id,
						type,
						open,
						were
					} = item;
					return {
						contactId: id,
						identity: type,
						open,
						were
					}
				})
				this.dataform.shopfrontPhoto = that.shopfrontPhotoList.join(',');
				this.dataform.storeCategory = getCategory(this.categoryOn).value;

				this.sts = status;
				if (that.typeOn == 0) {
					this.dataform.status = '0'
				} else if (that.typeOn == 1) { //转让
					this.dataform.status = '2'
				}
				// console.log(this.dataform);
				// return;
				if (this.editId) {
					editInfo(this.dataform).then(res => {
						if (res.code == 200) {
							if (status == 1) {
								that.continueFillIn(res.data.id);
							} else {
								this.$util.Tips({
									title: '编辑成功'
								}, {
									tab: 3
								})
								// uni.navigateBack()

							}

						}
					})
				} else {
					informationAdd(this.dataform).then(res => {
						if (res.code == 200) {
							if (status == 1) {
								that.continueFillIn(res.data.id);
							} else {
								let that = this;
								this.$util.Tips({
									title: '发布完成'
								}, {
									tab: 2,
									url: '/pages/releases/rentalStores/rentalStores'
								})
							}
						} else {
							this.$util.Tips({
								title: res.message
							})
						}
					}).catch(e => {
						this.$util.Tips({
							title: e
						})
					})
				}

			},
			continueFillIn(id) {
				// 商铺出租资料完善
				uni.navigateTo({
					url: '/pages/releases/continueFillin/shopRent?typeOn=' + this.typeOn + '&id=' +
						id
				})
			},
			//删除标签
			closeAdvantages(item, index) {
				this.advantages.splice(index, 1)
				if (this.advantageIds.indexOf(index) != -1) {
					let idx = this.advantageIds.indexOf(index)
					this.advantageIds.splice(idx, 1);
					this.storeAdvantage.splice(index, 1)
				}
			},
			advantageChecked(item, index) {
				if (this.advantageIds.indexOf(index) != -1) {
					let idx = this.advantageIds.indexOf(index)
					this.advantageIds.splice(idx, 1);
					this.storeAdvantage.splice(idx, 1)
					console.log(this.storeAdvantage, this.advantageIds, index)
				} else {
					console.log(this.storeAdvantage)
					this.advantageIds.push(index);
					this.storeAdvantage.push(item)
				}

			},
			addContact() {
				uni.navigateTo({
					url: '/pages/releases/addShopContact/addShopContact'
				})
			},
			treeConfirm(data) {
				console.log(data)
			},
			getDetail() {
				console.log('getListgetList',this.storeCategory)
				ShopRentDetailApiNoDw(this.editId, {
					status: this.st,
					storeCategory: this.storeCategory
				}).then(res => {
					console.log('editShop1', res)

					if (res.code == 200) {
						this.dataform = res.data
						let d = res.data;
						getApp().globalData.fbDeal(d, this)
						console.log("this.dataform.supportingFacilityName", this.dataform.supportingFacilityName)
						this.supportingFacility = this.dataform.supportingFacilityName;
						// console.log(this.groupCurrentName )
						// this.supportingFacility = this.dataform.supportingFacility
						// this.groupCurrentName = this.dataform.groupCurrent
						// this.workingGroupName = this.dataform.workingGroup
						// if (this.dataform.contacts && this.dataform.contacts.length > 0) {
						// 	this.contactList = this.dataform.contacts.map(item=>({
						// 		...item,
						// 		username: item.contactName,
						// 		phone: item.contactPhone,
						// 		id: item.contactId,
						// 		type: item.contactType}))
						// 		delete this.dataform.contacts
						// }
						// this.dataform.storeAdvantage && this.dataform.storeAdvantage.split('/').forEach((item,index) => {
						// 	let ind = this.advantages.indexOf(item);
						// 	if (ind == -1) {
						// 		this.advantages.push(item)
						// 		this.storeAdvantage.push(item)
						// 		this.advantageIds.push(this.advantages.length - 1)
						// 	} else {
						// 		this.advantageIds.push(ind)
						// 		this.storeAdvantage.push(this.advantages[ind])
						// 	}

						// })
						// this.dataform.shopfrontPhoto&&(this.shopfrontPhotoList = this.dataform.shopfrontPhoto.split(','))
					}
				})
			}
		},


	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';
</style>